<template>
  <div>
    <div class="container">
      <!-- 查重入口 -->
      <el-alert id="alert" title="" type="warning" show-icon>
        录入客户信息之前，建议查重，以免造成您和同事之间的业务冲突！
        <el-button
          type="danger"
          icon="el-icon-search"
          @click="dialogVisible = true"
          >立即查重</el-button
        >
      </el-alert>
      <el-dialog title="查重" :visible.sync="dialogVisible" width="50%">
        <div>
          <el-input
            v-model="nameOrPhone"
            placeholder="请输入关键字,支持模糊查找"
          >
            <el-button type="primary" icon="el-icon-search" slot="append"
              >查找</el-button
            >
          </el-input>
          <el-table :data="checkResult" style="width: 100%">
            <el-table-column prop="name" label="客户姓名"></el-table-column>
            <el-table-column prop="phone" label="联系电话"></el-table-column>
            <el-table-column
              prop="ownerUsername"
              label="报备人"
            ></el-table-column>
            <el-table-column
              prop="reportToDate"
              label="报备日期"
            ></el-table-column>
          </el-table>
        </div>
        <div slot="footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- 表单 -->
      <el-form ref="form" :model="customer" :rules="rules" label-width="100px">
        <el-form-item lable="用户名称">
          <el-input
            v-model="customer.ownerUsername"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="客户名称" prop="name">
          <el-input v-model="customer.name"></el-input>
        </el-form-item>
        <el-form-item label="客户性别" prop="gender">
          <el-radio-group v-model="customer.gender">
            <el-radio label="MALE">男</el-radio>
            <el-radio label="FAMALE">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="客户地址" prop="address">
          <el-input v-model="customer.address"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model.number="customer.phone"></el-input>
        </el-form-item>
        <el-form-item label="客户来源" prop="source">
          <el-select v-model="customer.source" placeholder="请输入客户来源">
            <el-option label="口碑" value="WORD_TO_MONTH">口碑</el-option>
            <el-option label="媒体" value="MEDIA">媒体</el-option>
            <el-option label="地推" value="PROMOTION">地推</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户状态" prop="state">
          <SelectState v-model="customer.state"></SelectState>
          <!-- <el-select v-model="customer.state" placeholder="请输入客户状态">
            <el-option label="未知" value="UNKNOWN">未知</el-option>
            <el-option label="有意向" value="INTENTIONAL">有意向</el-option>
            <el-option label="成交" value="DEALED">成交</el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="最后跟进日期" prop="lastFollowUpDate">
          <el-date-picker
            v-model="customer.lastFollowUpDate"
            type="date"
            placeholder="date"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="最后跟进内容" prop="lastFollowUpNote">
          <el-input
            type="textarea"
            v-model="customer.lastFollowUpNote"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-success" @click="handleSave"
            >请确认后提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { DatePicker } from "element-ui";
import SelectState from "../../components/SelectState.vue";
export default {
  components:{SelectState},
  data() {
    var validatePass = (rule, value, callback) => {
      if (!value) {
        return callback("请输入电话号码");
      } else {
        if (
          value !=
          "^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])d{8}$"
        ) {
          return callback("请输入正确格式的手机号");
        }
      }
    };
    return {
      customer: {
        ownerUsername: "",
        name: "",
        gender: "FEMALE",
        phone: "",
        address: "",
        source: "",
        state: "",
        lastFollowUpDate: "",
        lastFollowUpNote: "",
        reportToDate: Date(),
      },
      state:null,
      rules: {
        name: [{ required: true, message: "请输入客户姓名", trigger: "blur" }],
        phone: [{ validator: validatePass, trigger: "blur" }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        lastFollowUpDate: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
      },
      dialogVisible: false,
      nameOrPhone: "",
      checkResult: [],
    };
  },

  created() {
    this.customer.ownerUsername = this.$store.state.currentUser.username;
  },
  methods: {
    handleSave() {
      this.axios
        .post("/customer/create", this.customer)
        .then(() => {
          this.$message.success("保存成功");
        })
        .catch(() => {
          this.$message.error("保存失败");
        });
    },
    handleDuplicate() {
      this.axios
        .get("/customer/check", {
          params: (this.nameOrPhone = this.nameOrPhone),
        })
        .then((resp) => {
          this.checkResult = resp.data;
        })
        .catch(() => {
          this.$message.error("检索失败");
        });
    },
  },
};
</script>

<style scoped>
#app {
  margin-top: 100px;
}
#alert {
  margin-bottom: 30px;
}
</style>